<template>
    <div class="menu">
        <div class="allLink">
            <i class="ifont icon-sjzx" />
            <span>产品与服务</span>
            <i class="ifont icon-leftMenu" />
        </div>
        <ul class="func">
            <li 
                v-for="item in showmenus" 
                :key="item.f_bh" 
                v-dragging="{ item: item, list: showmenus, group: 'color' }" 
                @mouseover="mouseOver(item.f_bh)"
                @mouseleave="mouseLeave(item.f_bh)"
                class="func-item">
                <span :class="{'hover-span':item.f_bh === showItem,'nohover-span':item.f_bh !== showItem,'func-span':true}">
                    <i :class="'ifont ' + item.f_icon" />
                    <span>{{ item.f_mc }}</span>
                </span>
                <span class="span-icon" v-show='item.f_bh === showItem'>
                    <i class="ifont icon-zidian" title="取消收藏" @click="removeItem(item.f_bh)" />
                </span>
            </li>
        </ul>
        <menu-panel v-if="false" />
    </div>
</template>

<script>
import MenuPanel from '@/components/MenuPanel'
export default {
    name: 'Menu',
    components: { MenuPanel },
    data() {
        return {
            showItem:'',
            showmenus: [
                {
                    f_bh: '001',
                    f_mc: '消息服务001',
                    f_icon: 'icon-zidian',
                    f_xh: ''
                },
                {
                    f_bh: '002',
                    f_mc: '消息服务002',
                    f_icon: 'icon-flow01',
                    f_xh: ''
                },
                {
                    f_bh: '003',
                    f_mc: '消息服务003',
                    f_icon: 'icon-money02',
                    f_xh: ''
                },
                {
                    f_bh: '004',
                    f_mc: '消息服务004',
                    f_icon: 'icon-other01',
                    f_xh: ''
                }
            ]
        }
    },
    methods: {
        removeItem(deletedId) {
            this.showmenus = this.showmenus.filter(item => item.f_bh !== deletedId)
        },
        // 移入
        mouseOver(bh) {
            this.showItem = bh
        },
        // 移出
        mouseLeave(bh) {
            this.showItem = ''
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.menu {
    width: 270px;
    position: absolute;
    background-color: #fff;
    margin: 1px 0;
    bottom: 0;
    top: 0;
    .allLink {
        font-size: 12px;
        height: 38px;
        line-height: 38px;
        border-bottom: 1px solid #f0f0f0;
        cursor: pointer;
        i:first-child {
            margin: 0 20px;
        }
        i:last-child {
            float: right;
            margin-right: 12px;
            font-size: 12px;
        }
    }
    .func {
        overflow-y: auto;
        height: calc(100% - 38px);
        overflow-x: hidden;
        padding: 0;
        .func-item {
            padding: 0 20px;
            height: 40px;
            cursor: move;
            line-height: 40px;
            font-size: 12px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .func-span{
                display: inline-block;
            }
            i:first-child {
                margin-right: 10px;
            }
            .span-icon{
                float: right;
                // padding-right: 10px;
                color: #949191;
                i:first-child {
                    cursor: pointer;
                }
            }
        }
        .func-item:hover{
            background-color: #f0f0f0;
        }
        .hover-span {
            color: orange;
            cursor: pointer;
            // transition: 1s;
        }
        .nohover-span {
            transition-delay: 0.2s;
        }
    }
}
</style>
